<template>
  <div style="display: flex; flex-wrap: nowrap; align-items: center">
    <span style="margin-right: 11px">
      <img
        v-if="data.type === 0"
        :src="fileFolder"
        alt=""
        style="width: 18px"
      />
      <img v-else :src="tagImg" alt="" style="width: 17px" />
    </span>
    <a-input
      type="text"
      v-model:value="name"
      :disabled="data.loading"
      placeholder="请输入"
      :maxlength="32"
    />
  </div>
  <div v-if="open" class="error">
    <span>{{ error }}</span>
  </div>
  <!-- </a-popover> -->
</template>
<script setup>
import { computed, onUnmounted, ref, watch } from 'vue'
import { Form } from 'ant-design-vue'
import { useVModel } from '@vueuse/core'
import iconfont from '@/components/iconfont.vue'
import { TagFilled } from '@ant-design/icons-vue'
import tagImg from '@/assets/images/tag.png'
import fileFolder from '@/assets/images/file-folder.png'
import { valid } from 'mockjs'

/**
 * 外部参数
 */
let props = defineProps({
  name: { type: String },
  loading: { type: Boolean, default: () => false },
  data: { type: Object, required: true },
  rules: { type: Object, default: () => ({}) },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:name'])
/**
 * 双向绑定
 */
let name = useVModel(props, 'name', emit)
/**
 * 校验相关
 */
let useForm = Form.useForm
let { validateInfos, validate, resetFields } = useForm(props.data, props.rules)
let error = computed(() => {
  return validateInfos?.tagName?.help?.[0]?.[0]
})
let open = ref(false)
watch(error, e => {
  open.value = !!e
})
onUnmounted(() => {
  open.value = false
})

/**
 * 暴露相关方法
 */
defineExpose({
  validate,
})
</script>
<style lang="less" scoped>
.error {
  padding-left: 30px;
  font-size: 14px;
  line-height: 16px;
  color: #ff4d4f;
}
</style>
